<script setup>
import { reactive, ref, onMounted } from "vue";
import { ElMessage, ElMessageBox, textProps } from 'element-plus';
import { useStore } from 'vuex'
import api from "../api";
import { RouterLink, useRouter } from "vue-router";
import characterChart from "../components/characterChart.vue";
const store = useStore()
const router = useRouter()
const account = ref()
const password = ref()
const number = ref()

const adminLogin = () => {
  store.commit("setStatus", 0)//admin
}

const teacherLogin = () => {
  store.commit("setStatus", 1)//teacher
}

const studentLogin = () => {
  store.commit("setStatus", 2)//student
}

//这里可以使用全局状态管理，例如把管理员登录后状态设为0，学生为2等
const loginButton = () => {
  store.commit("setName", account.value) //点击登录以后获取该用户的name

  //not null
  if (account.value && password.value) {
    if (store.state.status == 0)//admin login
      api.getAdminsByAccount(account.value).then(res => {
        if (res.data.status == 'success') {
          if (password.value == res.data.results[0].admin_account)
            router.push({ path: "/admin" })
          else
            handleError()
        }
        else
          handleError()
      })

    else {
      api.getUserByUsernameToLogin(account.value).then(res => {
        if (res.data.status == 'success') {
          store.commit("setID", res.data.results[0].user_cardID)
          if (password.value == res.data.results[0].user_password) {
            if (store.state.status == 1)
              router.push({ path: "/teachers" })
            if (store.state.status == 2)
              router.push({ path: "/students" })
          }
          else
            handleError()
        }
        else
          handleError()
      })
    }
  }
  //null
  else {
    ElMessage({
      type: 'warning',
      message: '请输入账号和密码',
    })
  }

}

const handleError = () => {
  ElMessage({
    type: 'error',
    message: '账号或密码有误',
  })
}

</script>

<template>
    <div class="homeBox">
        <el-container style="height: 100%;display: flex;flex-direction: row;">

            <!-- <el-main> -->
            <!-- <el-image style="width: 780px;height: 500px;" src="src/assets/background.jpg" :fit="fill" /> -->
            <div style="width: 1100px;height: 800px;">
                <img src="../assets/background.jpg" style="width: 100%;height: 100%; object-fit: cover;" />
            </div>


            <!-- </el-main> -->
            <el-aside width="30%">
<!--                <el-row>-->
<!--                    <RouterLink to="/admin">-->
<!--                        <el-button ref="test" type="warning" @click="loginButton" style="margin: 20px 20px;">管理员直接登录</el-button>-->
<!--                    </RouterLink>-->
<!--                    <RouterLink to="/students">-->
<!--                        <el-button type="warning" @click="loginButton" style="margin: 20px 20px;">学生直接登录</el-button>-->
<!--                    </RouterLink>-->
<!--                    <RouterLink to="/teachers">-->
<!--                        <el-button type="warning" @click="loginButton" style="margin: 20px 20px;">教师直接登录</el-button>-->
<!--                    </RouterLink>-->
<!--                </el-row>-->

                <!-- //todo:change it to pic -->
<!--                <el-row>-->
<!--                    <el-icon :size="50">-->
<!--                        <Notebook />-->
<!--                    </el-icon>-->
<!--                </el-row>-->
              <div class="area6">
                <character-chart/>
              </div>


                <!-- todo:change it to beautiful txt -->
                <el-row style="justify-content: center;margin-top: -70px;">
                    <a>欢迎来到我们的图书管理系统</a>
                </el-row>

                <!-- todo:make button move -->
                <el-row style="text-align: center;margin-top: auto;height: 58px;">

                    <el-button @click="adminLogin" style="margin: 25px;">管理员</el-button>
                    <el-button @click="teacherLogin" style="margin:25px;">老师</el-button>
                    <el-button @click="studentLogin" style="margin:25px;">学生</el-button>

                </el-row>
                <br />
                <el-row>
                    <el-input v-model="account" placeholder="请输入账号" class="account_input">
                        <template #prepend>
                            <el-icon>
                                <User />
                            </el-icon>
                        </template>
                    </el-input>
                </el-row>
                <el-row>
                    <el-input v-model="password" placeholder="请输入密码" class="password_input">
                        <template #prepend>
                            <el-icon>
                                <Lock />
                            </el-icon>
                        </template>
                    </el-input>
                </el-row>
              <el-row class="el-row1">
                <el-input v-model="number" placeholder="验证码" class="number_input">
                </el-input>
<!--                <input placeholder="验证码" class="number_input"/>-->
                <img src="../assets/number.jpg" class="img"/>
              </el-row>
              <el-row>
                <div style="text-align: center;">
                  <el-button type="primary" @click="loginButton" style="margin-top: 10px;width: 300px;">登录</el-button>
                </div>
              </el-row>
                <el-row>
                    <div style="text-align: center;">
                        <el-button type="primary" @click="loginButton" style="margin-top: 20px;width: 300px;background-color: rgb(243,201,110);border: none">登录</el-button>
                    </div>
                </el-row>
            </el-aside>
        </el-container>
    </div>
</template>

<style scoped>
a {
  text-decoration: none;
}

.router-link-active {
  text-decoration: none;
}

.account_input {
  width: 300px;
  margin-bottom: 20px;
}

.password_input {
  width: 300px;
  margin-bottom: 20px;
}

.number_input {
  width: 120px;
  margin-bottom: 20px;
  margin-left: 0px;
}

.el-row {
  justify-content: center;
  top:150px;
}

.el-row1{
  justify-content: left;
  left: 120px;
  top:150px;
}

.img{
  margin-left: 40px;
  height: 37px;
  width: 90px;
}

.el-main {
  --el-main-padding: 0;
}

.area6 {
  top:100px;
  left: -15px;
  position: relative;
  display: flex;
  width: 500px;
  height: 160px;
  background-color: '';
  padding: 20px;
  box-sizing: border-box;
}
</style>
